import React from 'react';
import { connect } from 'react-redux'
import {Modal, Button,message,Carousel,Icon} from 'antd'
import '../style/showBigImg.less'
@connect(
    (state, props) => ({
      
    })
  )
class showBigImg extends React.Component {
  constructor(props){
    super(props);
    this.state={
    }
  }
  componentWillReceiveProps(props){//在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
  }
  componentDidMount(){
    setTimeout(()=>{
        this.refs.swiperImg.innerSlider.slickGoTo(this.props.imgIndex)
    },20)    
  }
  toBefore(){
    this.refs.swiperImg.innerSlider.slickPrev()
  }
  toAfter(){
    this.refs.swiperImg.innerSlider.slickNext()
  }
  componentWillMount() {
  }
  handleCancel = (e) => {
    this.props.closeModal();
  }

  render(){
    return (
        <div>
            <Modal
                width={550}
                title={"查看大图"}
                visible={this.props.visible}
                maskClosable={false}
                onCancel={this.handleCancel}
                footer={[
                    <Button key="ok" type="primary"  onClick={this.handleCancel.bind(this)}>关闭</Button>
                ]}
                >
                <div className="bigImgWrap">
                    {
                        this.props.imgArry.length != 1?
                        <div>
                            <div className="toBefore" onClick={this.toBefore.bind(this)}><Icon type="left-circle" /></div>
                            <div className="toAfter" onClick={this.toAfter.bind(this)}><Icon type="right-circle" /></div>
                        </div>:''
                    }
                    <Carousel ref="swiperImg">
                        {
                            this.props.imgArry.map((item,i)=> {
                                return(
                                    <div className="bigImgDiv" key={i}><img src={item}/></div>
                                )
                            })
                        }
                    </Carousel>
                </div>
            </Modal>
        </div>
    )
  }
}
export default showBigImg;